<template>
	<view class="rf-floor-index">
		<!--广告图-->
		
		<!--列表-->
		<view class="f-header" @tap="toList">
			<text />
			<view class="tit-box">
				<text class="tit">{{ header.title }}</text>
				
			</view>
			<text v-if="isLink" class="iconfont iconyou"></text>
		</view>
		<rf-house-list :bottom="bottom" :list="list.length > 0 ? list : [0, 0]"></rf-house-list>
	</view>
</template>
<script>/**
 *@des 首页楼层组件
 *@author stav stavyan@qq.com
 *@blog https://stavtop.club
 *@date 2020/01/08 11:28:39
 */
import $mAssetsPath from '@/config/assets.config';
import rfHouseList from '@/components/rf-house-list';
export default {
	name: 'rfFloorIndex',
	components: { rfHouseList },
	props: {
		// 列表
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 广告图
		banner: {
			type: Object,
			default() {
				return {};
			}
		},
		// 标题 例: 
		header: {
			type: Object,
			default() {
				return {};
			}
		},
		// 是否显示banner图
		bannerShow: {
			type: Boolean,
			default: true
		},
		// 是否可点击
		isLink: {
			type: Boolean,
			default: false
		},
		// icon
		icon: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
		};
	},
	computed: {
		bottom () {
			let bottom = 0;
			/*  #ifdef H5  */
      bottom = 90;
			/*  #endif */
			return bottom;
		}
	},
	
	methods: {
		// 跳转详情页
		detail(id) {
			if (!id) return;
			this.$emit('detail', {
				id
			});
		},
		// banner 跳转页
		toBanner(item) {
			this.$emit('toBanner', item);
		},
		// 列表 跳转页
		toList() {
			this.$emit('toList');
		}
	}
};
</script>
<style scoped lang="scss">
.rf-floor-index {
	.banner {
		width: 92%;
		margin: 20upx 4% 0;

		image {
			width: 100%;
			height: 25vw;
			border-radius: 20upx;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.05);
		}
		.ad {
		    font-size: 12px;
		  
		    height: 15px;
		    line-height: 15px;
		    width: 31px;
		    text-align: center;
		    border: 1px solid #fff;
		    display: block;
		 
		  
		    left: 7px;
		    color: #fff;
			
			  
		}
	}
	.f-header {
		display: flex;
		align-items: center;
		height: 120upx;
		padding: 6upx 20upx;
		margin: 0 0 20upx;
		background: #fff;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.05);

		.iconfont {
			font-size: $font-lg + 24upx;
			margin-right: 20upx;
		}

		.tit-box {
			width: 100%;
			    height: 60px;
			    line-height: 60px;
			    font-size: 20px;
			    font-weight: bold;
			    color: #30323D;
				padding-left: 10rpx;
		}

		.tit {
			font-size: $font-lg + 8upx;
			color: #font-color-dark;
			line-height: 1.3;
			font-weight: bold;
			    color: #30323D;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.iconyou {
			font-size: $font-lg + 4upx;
			color: $font-color-light;
		}
	}
}
</style>
